<template>
  <s-layout tabbar="/pages/xf/check/list">
  <view class="container">

    <!-- 检查记录列表 -->
    <view v-for="item in listData" :key="item.id" class="record-card" @click="handleItemClick(item)">
      <image v-if="item.image" class="preview-image" :src="item.image" mode="aspectFill" />

      <!-- 主要内容 -->
      <view class="content-container">
        <view class="text-info">
          <view class="info-row">
            <view class="info-item-1">
              <fui-icon name="my" size="32rpx" color="#3772ff" class="icon"></fui-icon>
              <text class="label">负责人：</text>
              <text class="value">{{ item.personInCharge }}</text>
            </view>
          </view>
          <view class="info-row">
            <view class="info-item-1">
              <fui-icon name="bankcard" size="32rpx" color="#3772ff" class="icon"></fui-icon>
              <text class="label">企业名称：</text>
              <text class="value">{{ item.company }}</text>
              <view class="status-tag" :class="getStatusClass(item.status)">
                {{ item.status }}
              </view>
            </view>
          </view>
          <view class="info-row">
            <fui-icon name="location" size="32rpx" color="#3772ff" class="icon"></fui-icon>
            <text class="label">检查地点：</text>
            <text class="value">{{ item.location }}</text>
          </view>
          <view class="info-row">
            <fui-icon name="calendar" size="32rpx" color="#3772ff" class="icon"></fui-icon>
            <text class="label">检查时间：</text>
            <text class="value time">{{ item.time }}</text>
            <view
                class="cicon-more"
                style="width: 50rpx; position: absolute;right: 5rpx;"
                @click.stop="editBoxShow(item)"
              ></view>
              <view class="editBox" v-if="item.show">
                <view class="editBox-item" @click.stop="sheep.$router.go('/pages/xf/check/update', { id: item.id })">
                  <text class="editBox-item-text">修改</text>
                </view>
                <view class="editBox-item" @click.stop="deleteDetail(item)">
                  <text class="editBox-item-text">删除</text>
                </view>
              </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</s-layout>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import sheep from "@/sheep";
import { onLoad } from "@dcloudio/uni-app";

const listData = ref([
  {
    id: 1,
    status: '已整改',
    company: '呼和浩特市兴安化工有限责任公司',
    location: '生产车间A区',
    time: '2023-08-15 14:30',
    personInCharge: '王丹',
    image: 'https://img95.699pic.com/photo/50027/6046.jpg_wh860.jpg',
    show: false
  },
  {
    id: 2,
    status: '未整改',
    company: '呼和浩特市郡泰商贸有限责任公司',
    location: '原料仓库',
    time: '2023-08-14 09:15',
    image: 'https://ts1.cn.mm.bing.net/th/id/R-C.6e43e5cd29fcbb96f3a59078c333d08f?rik=Io3Ln6u4qBBCxQ&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50022%2f4158.jpg_wh860.jpg&ehk=Y0QYtaGcs%2bdp2jjctWuypVnzHXx%2bfcKaC6Rrt3QOW%2fs%3d&risl=&pid=ImgRaw&r=0',
    show: false
  },
  {
    id: 3,
    status: '未整改',
    company: '呼和浩特市蒙氧气体有限责任公司',
    location: '装配车间',
    time: '2023-08-13 16:45',
    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.FSyvShevZmUPnOSQ4_3oXAHaFj?rs=1&pid=ImgDetMain',
    show: false
  }
]);

const getStatusClass = (status: string) => {
  switch(status) {
    case '无隐患':
      return 'status-done';
    case '存在隐患':
      return 'status-processing';
    case '隐患较大':
      return 'status-pending';
    default:
      return '';
  }
};

const editBoxShow = (item:any) =>{
  item.show = !item.show;
}

const handleItemClick = (item: any) => {
  uni.navigateTo({
    url: `/pages/xf/check/detail?id=${item.id}`
  });
};
</script>

<style lang="scss" scoped>
.container {
  width: 96%;
  margin: auto;
  background-color: #f5f6f8;
  min-height: 100vh;
}

.record-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  position: relative;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.status-tag {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;

  &.status-done {
    background: #e8f5e9;
    color: #43a047;
  }

  &.status-processing {
    background: #fff3e0;
    color: #fb8c00;
  }

  &.status-pending {
    background: #ffebee;
    color: #e53935;
  }
}

.preview-image {
  width:100%;
  height: 300rpx;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
  display: block;
  object-fit: cover;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.content-container {
  display: flex;
  align-items: center;
}

.text-info {
  flex: 1;
  margin-left: 24rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;

  .editBox {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    right: 50rpx;
    bottom: 30rpx;
    width: 150rpx;
    z-index: 2;
    padding: 10rpx;

    .editBox-item {
      color: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10rpx;
      border-radius: 4rpx;
      transition: background-color 0.3s;

      &:hover {
        background-color: #f0f0f0;
      }
    }
  }

  &:last-child {
    margin-bottom: 0;
  }

  .icon {
    margin-right: 12rpx;
  }

  .label {
    font-size: 26rpx;
    color: #666;
    margin-right: 12rpx;
  }

  .value {
    font-size: 30rpx;
    color: #333;

    &.time {
      color: #999;
    }
  }
}
</style>
